import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  Image,
} from "react-native";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { Tabs } from "@ant-design/react-native";
import axios from "axios";
import { router } from "expo-router";
import Api from '../Api/api'
export default function Meeting() {
  const tabs = [{ title: "经典病例" }, { title: "读片会" }];
  const [text, onChangeText] = useState("");
  const [state, setState] = useState(false); //控制搜索框的显示
  const [activeKey, setActiveKey] = useState("home"); // 当前选中的标签
  const [cases, setcase] = useState([]);
  const style = {
    alignItems: "center",
    justifyContent: "center",
    height: Dimensions.get("window").height,
    backgroundColor: "#fff",
  };
  // 数据请求
  useEffect(() => {
    getcases();
  }, []);
  // 获取所有的病例数据
  const getcases = async () => {
    try {
      const {
        data: { data },
      } = await Api.get("/yg/share");
      setcase(data);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <View style={styles.container}>
      {/* 搜索 */}
      {state ? (
        <>
          <View style={styles.searchbox}>
            <View style={styles.searchinput}>
              <Ionicons name="search-outline" size={18} color={"#ccc"} />
              <TextInput
                style={styles.input}
                onChangeText={onChangeText}
                value={text}
                placeholder="搜索"
              />
            </View>
          </View>
        </>
      ) : (
        <>
          <View style={styles.searchbox}>
            <TouchableHighlight
              onPress={() => {
                setState(true);
              }}
            >
              <View style={styles.search}>
                <Ionicons name="search-outline" size={24} color={"#ccc"} />
                <Text style={{ marginLeft: 10, color: "#ccc" }}>搜索</Text>
              </View>
            </TouchableHighlight>
          </View>
        </>
      )}
      {/* 病例分享 */}
      <Tabs tabs={tabs}>
        <View style={style}>
          <ScrollView>
            {cases
              .filter((item) => item.cateshare?.cateshare === "经典病例")
              .map((item) => (
                <TouchableHighlight
                  onPress={() => {
                    router.push({
                      pathname: "/YgFile/DescCourse",
                      params: { title: item.sharename,type: "经典病例" }, // 传递参数
                    });
                  }}
                >
                  <View
                    key={item._id}
                    style={[styles.casesd, { paddingLeft: 10 }]}
                  >
                    <Image
                      source={{ uri: item.shareimg }}
                      style={{ width: 100, height: 100 }} // 确保设置了宽高
                    />
                    <View style={styles.desc}>
                      <Text style={styles.title}>{item.sharename}</Text>
                      <Text
                        numberOfLines={3}
                        ellipsizeMode="tail"
                        style={{
                          color: "#ccc",
                          paddingLeft: 10,
                          marginTop: 12,
                          paddingRight: 10,
                        }}
                      >
                        刘某某，男，53岁，患左肺小细胞肺癌局限期，接受“铂+依托泊苷”化疗和胸部放疗
                      </Text>
                    </View>
                  </View>
                </TouchableHighlight>
              ))}
          </ScrollView>
        </View>
        <View style={style}>
          <ScrollView>
            {cases
              .filter((item) => item.cateshare?.cateshare === "读片会")
              .map((item) => (
                <TouchableHighlight
                onPress={()=>{
                  router.push({
                    pathname: "/YgFile/DescCourse",
                    params: { title: item.sharename,type: "读片会" }, // 传递参数
                  })
                }}
                >
                  <View
                    key={item._id}
                    style={[styles.casesd, { paddingLeft: 10 }]}
                  >
                    <Image
                      source={{ uri: item.shareimg }}
                      style={{ width: 100, height: 100 }} // 确保设置了宽高
                    />
                    <View style={styles.desc}>
                      <Text style={styles.title}>{item.sharename}</Text>
                      <Text
                        numberOfLines={3}
                        ellipsizeMode="tail"
                        style={{
                          color: "#ccc",
                          paddingLeft: 10,
                          marginTop: 12,
                          paddingRight: 10,
                        }}
                      >
                        男性，26岁 病史：间歇性头痛、头晕伴行走不稳一月余。
                      </Text>
                    </View>
                  </View>
                </TouchableHighlight>
              ))}
          </ScrollView>
        </View>
      </Tabs>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 70,
    alignItems: "center",
    justifyContent: "center",
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  Tabbar: {
    width: Dimensions.get("window").width,
    height: 100,
  },
  casesd: {
    width: Dimensions.get("window").width,
    marginTop: 10,
    height: 100,
    flexDirection: "row",
    display: "flex",
  },
  desc: {
    width: Dimensions.get("window").width - 100,
    height: 100,
  },
  title: {
    fontWeight: "bold",
    paddingLeft: 10,
  },
});
